<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合同管理</title>
    <link rel="stylesheet" href="../../zui/css/zui.min.css">
    <link rel="stylesheet" href="../../zui/css/zui-theme.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link href="../../zui/lib/datatable/zui.datatable.min.css" rel="stylesheet">
    <link href="../../zui/lib/datetimepicker/datetimepicker.min.css" rel="stylesheet">
</head>
<body style="padding: 10px;">
<div class="section-title" style="margin-bottom: 10px;">
    <span>合同管理</span>
</div>
<div class="alert alert-primary">
    <h4><span class="red">温馨提示：</span></h4>
    <hr>
    <div>
        1. 合同登记成功后即开始执行 <br>
        2. 合同登记前，请先完善您公司下的客户信息、服务团队信息。
    </div>
</div>
<div class="tab clearfix">
    <div class="left pull-left">
        <ul>
            <li class="active">全部</li>
            <li class="">执行中</li>
            <li class="">已完成</li>
            <li class="">已终止</li>
        </ul>
    </div>
</div>
<div class="table-search-wrap">
    <div class="input-group" style="max-width: 1000px">
        <span class="input-group-addon">合同名称</span>
        <input type="text" class="form-control" placeholder="">
        <span class="input-group-addon">客户名称</span>
        <input type="text" class="form-control" placeholder="">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button">搜索</button>
        </span>
        <span class="input-group-btn">
            <button class="btn btn-success" type="button">合同登记</button>
        </span>
    </div>
</div>
<div>
    <div>当前查询< 合同合计金额 >: <span class="red">100元</span>，< 实际收款金额合计 >: <span class="red">100元</span>，< 已开票金额合计 >: <span
            class="red">100元</span></div>
</div>
<table class="table datatable">
    <thead>
    <tr>
        <th>序号</th>
        <th>合同编号</th>
        <th>合同名称</th>
        <th>客户名称</th>
        <th>合同金额</th>
        <th>已开票金额</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><a href="">编辑查看</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><a href="">编辑查看</a></td>
    </tr>
    </tbody>
</table>

<ul class="pager">
    <li class="previous"><a href="">«</a></li>
    <li><a href="">1</a></li>
    <li class="active"><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li class="next"><a href="">»</a></li>
</ul>

<div class="modal fade" id="addOrder">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">关闭</span></button>
                <h4 class="modal-title">新增合同</h4>
            </div>
            <div class="modal-body">
                <div class="panel">
                    <div class="panel-heading">
                        基本信息
                    </div>
                    <div class="panel-body row">
                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;&emsp;&emsp;<span class="red">*</span><span>合同名称</span>
                                </span>
                                <input type="text" class="form-control">
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;&emsp;&emsp;<span class="red">*</span><span>合同状态</span>
                                </span>
                                <input type="text" readonly class="form-control">
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;&emsp;&emsp;<span class="red">*</span><span>商品名称</span>
                                </span>
                                <select name="" id="" class="form-control">
                                    <option value="">-请选择-</option>
                                </select>
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="red">*</span><span>服务方企业名称</span>
                                </span>
                                <input type="text" readonly class="form-control">
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="red">*</span><span>客户方企业名称</span>
                                </span>
                                <select name="" id="" class="form-control">
                                    <option value="">-请选择-</option>
                                </select>
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;&emsp;&nbsp;收款和开票</span>
                                </span>
                                <select name="" id="" class="form-control">
                                    <option value="">-请选择-</option>
                                </select>
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;<span class="red">*</span><span>合同签订日期</span>
                                </span>
                                <input type="text" readonly class="form-control form-date">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="red">*</span><span>正式合同信息</span>
                                </span>
                                <input type="text" readonly class="form-control">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">上传</button>
                                    <button class="btn btn-default" type="button">查看</button>
                                </span>
                            </div>
                            <div  style="padding: 10px 0 13px 9em;color: #999;line-height: 1.2;">
                              只支持大小不超过10M的png/jpg/jpeg/pdf/rar/zip格式文件
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;&emsp;<span class="red">*</span><span>合同类型</span>
                                </span>
                                <input type="text" readonly class="form-control">
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;&emsp;<span class="red">*</span><span>合同金额</span>
                                </span>
                                <input type="text" class="form-control">
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span>&nbsp;服务方签约人</span>
                                </span>
                                <input type="text" class="form-control">
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span>&nbsp;客户方签约人</span>
                                </span>
                                <input type="text" class="form-control">
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;&emsp;&nbsp;<span>收款方式</span>
                                </span>
                                <select name="" id="" class="form-control">
                                    <option value="">-请选择-</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-heading">
                        客户信息（选择客户方企业名称会自动带出客户信息）
                    </div>
                    <div class="panel-body row">
                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;;<span class="red">*</span><span>客户名称</span>
                                </span>
                                <input type="text" readonly class="form-control">
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="red">*</span><span>纳税人类型</span>
                                </span>
                                <input type="text" readonly class="form-control">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;&emsp;&emsp;<span class="red">*</span><span>纳税人识别号</span>
                                </span>
                                <input type="text" readonly class="form-control">
                            </div>
                        </div>
                        <div class="col-xs-12"><hr></div>
                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;客户电话
                                </span>
                                <input type="text" readonly class="form-control">
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    客户开户行
                                </span>
                                <input type="text" readonly class="form-control">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    &emsp;客户地址
                                </span>
                                <input type="text" readonly class="form-control">
                            </div>
                            <br>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    开户行账号
                                </span>
                                <input type="text" readonly class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>


<script src="../../zui/lib/jquery/jquery%20v1.11.0.js"></script>
<script src="../../zui/js/zui.min.js"></script>
<script src="../../zui/lib/datatable/zui.datatable.min.js"></script>
<script src="../../zui/lib/datetimepicker/datetimepicker.min.js"></script>

<script>
    $('table.datatable').datatable({
        checkable: true,
    });
    $(".form-date").datetimepicker(
        {
            language: "zh-CN",
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            format: "yyyy-mm-dd"
        });
</script>
</body>
</html>
